<template>
  <div class="z-card">
    <div class="title">{{ title }}</div>
    <div class="body"><slot></slot></div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

interface Props {
  title: string;
}

const props = defineProps<Props>();
</script>
<style scoped lang="less">
.z-card {
  background-color: var(--color-bg-1);
  .title {
    padding: 20px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: @z-border;
  }
  .body {
    padding: 20px;
  }
}
</style>
